<style>
.info-box {
    display: block;
    min-height: 90px;
    background: #fff;
    width: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-bottom: 15px;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.info-box.bg-aqua::before {
    background: linear-gradient(90deg, #00c0ef, #00a0e0);
}

.info-box.bg-green::before {
    background: linear-gradient(90deg, #00a65a, #008a4a);
}

.info-box.bg-yellow::before {
    background: linear-gradient(90deg, #f39c12, #e08e0b);
}

.info-box.bg-red::before {
    background: linear-gradient(90deg, #dd4b39, #c23e32);
}

.info-box-icon {
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 10px;
    display: block;
    float: left;
    height: 90px;
    width: 90px;
    text-align: center;
    font-size: 45px;
    line-height: 90px;
    background: rgba(255,255,255,0.2);
}

.bg-aqua .info-box-icon {
    background: rgba(255,255,255,0.2);
}

.bg-green .info-box-icon {
    background: rgba(255,255,255,0.2);
}

.bg-yellow .info-box-icon {
    background: rgba(255,255,255,0.2);
}

.bg-red .info-box-icon {
    background: rgba(255,255,255,0.2);
}

.info-box:hover .info-box-icon {
    transform: scale(1.1);
}

.info-box-icon > i {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.info-box-content {
    padding: 15px 10px;
    margin-left: 90px;
}

.info-box-text {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
    color: #999;
    letter-spacing: 0.5px;
}

.info-box-number {
    display: block;
    font-weight: 700;
    font-size: 24px;
    color: #333;
    margin-top: 5px;
}

.bg-aqua { 
    background-color: #17a2b8 !important; 
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.3);
}
.bg-aqua .info-box-text,
.bg-aqua .info-box-number {
    color: #fff;
}

.bg-green { 
    background-color: #28a745 !important; 
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}
.bg-green .info-box-text,
.bg-green .info-box-number {
    color: #fff;
}

.bg-yellow { 
    background-color: #ffc107 !important; 
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3);
}
.bg-yellow .info-box-text,
.bg-yellow .info-box-number {
    color: #fff;
}

.bg-red { 
    background-color: #dc3545 !important; 
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}
.bg-red .info-box-text,
.bg-red .info-box-number {
    color: #fff;
}

.status-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

.status-normal {
    background-color: #d4edda;
    color: #155724;
}

.status-hidden {
    background-color: #f8d7da;
    color: #721c24;
}

/* 现代化状态按钮组样式 */
.status-toggle-group {
    display: inline-flex;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 4px;
}

.status-toggle-group .btn {
    border-radius: 20px;
    border: none;
    padding: 10px 20px;
    margin: 0 2px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    position: relative;
    overflow: hidden;
    min-width: 80px;
}

.status-toggle-group .btn:last-child {
    border-right: none;
}

.status-toggle-group .btn.active {
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2)!important;
    transform: translateY(-1px) !important;
}

.status-toggle-group .btn-normal {
    transition: all 0.3s ease;
}

.status-toggle-group .btn-normal.active {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9), rgba(32, 201, 151, 0.9))!important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4) !important;
}

.status-toggle-group .btn-normal.active:hover {
    background: linear-gradient(135deg, #28a745, #20c997);
}

.status-toggle-group .btn-rejected {
    transition: all 0.3s ease;
}

.status-toggle-group .btn-rejected.active {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(232, 62, 140, 0.9))!important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4) !important;
}

.status-toggle-group .btn-rejected.active:hover {
    background: linear-gradient(135deg, #dc3545, #e83e8c);
}

.status-toggle-group .btn-pending {
    transition: all 0.3s ease;
}

.status-toggle-group .btn-pending.active {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(253, 126, 20, 0.9)) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4) !important;
}

.status-toggle-group .btn-pending.active:hover {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
}

.status-toggle-group .btn:hover:not(.active) {
    background: rgba(0,0,0,0.05);
    transform: translateY(-1px);
}
</style>

<!-- require.js 依赖已移除，避免在AJAX加载时产生冲突 -->

<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading()}
    </div>
    <div class="panel-body" disable-auto-refresh="true">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <!-- 统计卡片 -->
                <div class="row" style="margin-bottom: 20px;">
                    <div class="col-md-3">
                        <div class="info-box bg-aqua">
                            <span class="info-box-icon bg-aqua"><i class="fa fa-users"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">总学员数</span>
                                <span class="info-box-number" id="totalStudents">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box bg-green">
                            <span class="info-box-icon bg-green"><i class="fa fa-user-plus"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">今日新增</span>
                                <span class="info-box-number" id="todayNew">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box bg-yellow">
                            <span class="info-box-icon bg-yellow"><i class="fa fa-calendar"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">本月新增</span>
                                <span class="info-box-number" id="monthNew">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box bg-red">
                            <span class="info-box-icon bg-red"><i class="fa fa-map-marker"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">管辖教学点</span>
                                <span class="info-box-number" id="manageableOcations">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="toolbar">
                    <div class="btn-group">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}">
                            <i class="fa fa-refresh"></i> {:__('Refresh')}
                        </a>
                        <a href="javascript:;" class="btn btn-success btn-add" title="{:__('Add')}">
                            <i class="fa fa-plus"></i> {:__('Add')}
                        </a>
                    </div>
                    
                    <div class="btn-group">
                        <a href="javascript:;" class="btn btn-info btn-export" title="导出数据">
                            <i class="fa fa-download"></i> 导出数据
                        </a>
                    </div>

                    <!-- 城市和学校筛选框 - 修改为通用的cityschool类 -->
                    <div class="row cityschool">
                        <div class="form-group">
                            <select id="c-cityarea_id" name="cityarea_id" class="form-control" data-live-search="true">
                                <option value="">请选择城市</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <select id="c-school_id" name="school_id" class="form-control" data-live-search="true">
                                <option value="">请选择学校</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-success btn-filter">筛选</button>
                        </div>
                    </div>
                </div>

                <!-- 增加顶部选项卡 -->
                <ul class="nav nav-tabs">
                    <li class="{if $groupId=='1'}active{/if}"><a href="?group_id=1">学生</a></li>
                    <li class="{if $groupId=='2'}active{/if}"><a href="?group_id=2">老师</a></li>
                    <li class="{if $groupId=='3'}active{/if}"><a href="?group_id=3">管理员</a></li>
                    <li class="{if $groupId=='4'}active{/if}"><a href="?group_id=4">教学点管理员</a></li>
                </ul>

                <!-- 表格 -->
                <table id="table" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>昵称</th>
                            <th>手机号</th>
                            <th>教学点</th>
                            <th>班级</th>
                            <th>用户组</th>
                            <th>状态</th>
                            <th>注册时间</th>
                            <th>最后登录</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 确保在 AJAX 加载时也能正确初始化
    if (typeof require !== 'undefined') {
        require(['user/studentmanager'], function(StudentManager) {
            if (StudentManager && StudentManager.index) {
                StudentManager.index();
            }
        });
    }
});
</script>


